<template>
    <div><van-tabbar v-model="active" @change="change">
            <van-tabbar-item :icon=item.icon v-for="(item, index) in navList" :key="index">{{ item.name }}</van-tabbar-item>
        </van-tabbar></div>
</template>
  
<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router'
const Props = defineProps({
    navList: {
        type: Array,
        default: () => []
    },
    index: {
        type: Number,
    }
})
const active = ref(0);
const route = useRoute()
const emit = defineEmits(['active'])

const change = (active) => {
    emit('active', active)
}
watch(() => { return route.name }, (newVal) => {
    active.value = Props.navList.findIndex((element) => {
        return element.path == newVal
    })
})

</script>
  
<style></style>